<template>
  <div>
    <div>
      <el-card>
        <!-- 搜索 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <div class="one">
            <span style="font-size: 14px; color: pink;margin:10px  0 0 40px">说明:目前支持学科和关键字条件筛选</span>
            <el-button type="success" class="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="ruleForm.subjectID" placeholder="请选择" style="width:230px" @change="simplesList">
                  <el-option v-for="(item,index) in subjectList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="ruleForm.catalogID" placeholder="请选择" style="width:230px" @change="onSimpleiList">
                  <el-option v-for="(item,index) in simpleList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="ruleForm.tags" placeholder="请选择" style="width:230px">
                  <el-option v-for="(item,index) in simpleiList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input style="width:230px" v-model="ruleForm.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="ruleForm.questionType" placeholder="请选择" style="width:230px">
                  <el-option v-for="(item,index) in questionType" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="ruleForm.difficulty" placeholder="请选择" style="width:230px">
                  <el-option v-for="(item,index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="ruleForm.direction" placeholder="请选择" style="width:230px">
                  <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="ruleForm.creatorID" placeholder="请选择" style="width:230px">
                  <el-option v-for="(item,index) in role" :key="index" :label="item.value" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input style="width:230px" v-model="ruleForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input style="width:230px" v-model="ruleForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-form-item label="城市">
                  <el-col :span="10">
                    <el-select v-model="ruleForm.province" placeholder="请选择" style="width:113px" @change="getCity">
                      <el-option v-for="(item,index) in citySelect.province" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-col>
                  <el-col style="width:23px">—— </el-col>
                  <el-col :span="10">
                    <el-select v-model="ruleForm.city" placeholder="请选择" style="width:113px">
                      <el-option v-for="(item,index) in citySelect.cityDate" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
            </el-col>
            <el-col :span="4" :offset="2">
              <el-row>
                <el-col :span="20" style="margin-left:53px">
                  <el-button @click="clearFrom">清除</el-button>
                  <el-button type="primary" @click="handleFilter">搜索</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据记录 -->
        <el-alert type="info" class="alert" show-icon style="margin-bottom:15px">
          数据一共有 {{total}} 条记录
        </el-alert>

        <!-- 数据列表 -->
        <el-table fit highlight-current-row style="width: 100%" border :data="dataList" v-loading="loading">
          <el-table-column align="center" label="试题编号" prop="number">
          </el-table-column>
          <el-table-column align="center" label="学科" prop="subject">
          </el-table-column>
          <el-table-column align="center" label="目录" prop="catalog" width="80px">
          </el-table-column>
          <el-table-column align="center" label="题型" prop="questionType">
            <template #default={row}>
              {{formatCatalogID(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干" prop="question">
            <template #default={row}>
              {{noSpan (row.question)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间" prop="addDate" width="160px">
            <template #default="{row}">
              {{row.addDate |formatTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度" prop="difficulty">
            <template #default={row}>
              {{onDifficulty(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人" prop="creatorID">
            <template v-slot="{row}">
              {{ formatRole(row.creatorID) }}
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作" fixed="right" align="center" width="200px">
            <template #default="{row}">
              <el-button icon="el-icon-view" type="primary" plain circle @click="toEdit(row)"></el-button>
              <el-button icon="el-icon-edit" type="success" plain circle></el-button>
              <el-button icon="el-icon-delete" type="danger" plain circle @click="toDel(row)"></el-button>
              <el-button icon="el-icon-check" type="warning" plain circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <el-pagination :page-sizes="[1, 2, 3, 4, 5]" layout="sizes, prev, pager, next, jumper, ->, total" :total="total" :current-page="queryParams.page" :page-size="queryParams.pagesize" @current-change="changePage" @size-change="sizeChange" id="new" style="margin-top:15px" />
      </el-card>
    </div>
    <questions-preview :is-show-dept.sync="isShowDept" :to-list="toList"></questions-preview>
  </div>
</template>

<script>
// import { status } from '@/api/hmmm/constants'
import { list, detail, remove } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simples } from '@/api/hmmm/directorys.js'
import { simple as simplei } from '@/api/hmmm/tags.js'
import questionsPreview from '../components/questions-preview.vue'
import moment from 'moment'
import keyRole from '@/api/base/baseApi'
import { difficulty, direction, questionType } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  components: { questionsPreview },
  name: 'Questions',
  data () {
    return {
      ruleForm: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 市
        city: '', // 县
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: ''// 目录

      },
      loading: 'false',
      // 标签列表
      simpleiList: [],
      // 方向列表
      direction,
      // 试题类型
      questionType,
      // 简单目录
      simpleList: [],
      subjectList: [],
      // 查询参数
      queryParams: {
        page: 1,
        pagesize: 2
      },
      isShowDept: false,
      dataList: [],
      toList: {},
      role: keyRole.role,
      total: 0,
      rules: {},
      citySelect: {
        province: [],
        cityDate: []
      },
      difficulty
    }
  },
  // 时间过滤器
  filters: {
    formatTime (value) {
      if (!value) return ''
      return moment(value).format('yyyy-MM-DD  HH:mm:SS')
    }
  },
  created () {
    this.getList()
    this.getProvince()
    this.subjectsList()
  },
  methods: {
    // 搜索
    handleFilter () {
      // 当前页数所有信息
      this.queryParams.page = 1
      // 获取列表传参数
      this.getList(this.queryParams)
      console.log(this.queryParams)
    },

    // 清空表单
    clearFrom () {
      // 重置表单数据
      this.ruleForm = this.$options.data().ruleForm
    },
    // 题型渲染
    formatCatalogID (value) {
      const info = questionType.find(item => parseInt(item.value) === Number(value))
      value = info ? info.label : '其他'
      return value
    },

    // 获取标签目录
    // 当目录列表内容发生改变时，触发change事件，
    async onSimpleiList (name) {
      // name 获取到的值是input的内容
      const ret = await simplei(name)
      ret.data.forEach(item => {
        if (item.value === name) {
          // 1.清空之前的内容
          this.simpleiList = []
          // 清空表单中的内容
          this.ruleForm.tags = ''
          // 添加值
          this.simpleiList.push(item)
        }
      })
    },

    // 获取目录列表
    async simplesList (name) {
      const ret = await simples(name)
      // console.log(name)
      ret.data.forEach(item => {
        if (item.value === name) {
          this.simpleList = []
          this.ruleForm.catalogID = ''
          this.simpleList.push(item)
        }
      })
    },

    // 获取学科列表
    async subjectsList () {
      const ret = await simple()
      // console.log(ret)
      this.subjectList = ret.data
    },

    // 去除数据中的标签
    noSpan (question) {
      const str = question
      const result = str.replace(/<.*?>/ig, '')
      // console.log(result)
      return result
    },

    // 处理难度
    onDifficulty (value) {
      const info = difficulty.find(item => parseInt(item.value) === Number(value))
      value = info ? info.label : '其他'
      return value
    },

    // 处理录入人
    formatRole (value) {
      const info = this.role.find(item => parseInt(item.id) === Number(value))
      value = info ? info.value : '其他'
      return value
      // console.log(value)
    },

    // 查找市
    getProvince () {
      this.citySelect.province = provinces()
    },

    // 市以下地区
    getCity: function (e) {
      this.citySelect.cityDate = citys(e)
      // console.log(e)
      // this.ruleForm.city = this.citySelect.cityDate[0]
    },

    // 监听每页条数的变化
    sizeChange (pagesize) {
      this.queryParams.pagesize = pagesize
      this.getList()
    },

    // 监听页码的切换操作
    changePage (page) {
      // page表示当前页码
      this.queryParams.page = page
      this.getList()
    },

    // 删除
    async toDel (row) {
      try {
        const ret = await this.$confirm('确认要删除这条试题记录吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (ret === 'cancel') return
        const retDel = await remove(row)
        // console.log(retDel)
        if (retDel.status === 200) {
          this.$message.success('删除试题成功')
          this.getList()
        }
      } catch {
        this.$message.success('删除试题失败')
      }
    },

    // 查看详情
    async toEdit (row) {
      this.isShowDept = true
      const ret = await detail(row)
      // console.log(row)
      // console.log(ret)
      if (ret.status === 200) {
        this.toList = ret.data
      }
    },

    // 获取列表
    async getList (params) {
      this.loading = true
      try {
        const ret = await list(this.queryParams)
        // console.log(ret.data)
        this.dataList = ret.data.items
        this.total = ret.data.counts
      } catch {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    }

  }
}
</script>
<style  >
.alert {
  margin: 10px 0px;
}
.demo-ruleForm {
  padding: 0px 10px;
}
.one {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
>>>>>>> 804c80c6a2c0f1b670438d96df151c82197c5839
